<script setup lang="ts">
import type { FieldRule, FormInstance } from '@arco-design/web-vue'
import type { ComputedRef } from 'vue'
import useAddressPoolData from './useAddressPoolData'

interface IEmit {
  (event: 'update:id', value: string): void
  (event: 'add'): void
  (event: 'delete'): void
}

interface IProps {
  disableDelete?: boolean
  disableAdd?: boolean
  rules: FieldRule[]
  id: string
}
const props = withDefaults(defineProps<IProps>(), {
  disableDelete: false,
  disableAdd: false,
})
const emit = defineEmits<IEmit>()
const rulesIds = computed(() => {
  if (props.rules.length === 1 && props.rules[0].id === '')
    return []
  return props.rules.map(item => item.id)
})
const addressPoolType = inject('addressPoolType') as ComputedRef<1 | 2>
const { data: addressPoolData, loading, run } = useAddressPoolData()
const formRef = ref<FormInstance>()
const formData = reactive<any>({
  field: null,
})
const formRules = computed<{ [key: string]: FieldRule[] }>(() => {
  return {
    field: [{ required: true, message: '请选择地址池', trigger: 'change' }],
  }
})

function handleJump() {
  window.open('/dns/address-pool-management/static?type=open', '_target')
}
function handleFieldChange(val: string) {
  emit('update:id', val)
}
function setValue() {
  emit('update:id', formData.field)
}
async function validate() {
  setValue()
  return await formRef.value?.validate()
}
defineExpose({
  validate,
})
onMounted(() => {
  formData.field = props.id
  setValue()
})
</script>

<template>
  <a-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    inline
    class="address-pool"
  >
    <!-- 字段 -->
    <a-form-item
      field="field"
      hide-asterisk
      hide-label
    >
      <a-select
        v-model="formData.field"
        placeholder="请选择地址池"
        :disabled="loading"
        :show-footer-on-empty="true"
        @change="handleFieldChange"
      >
        <template #label="{ data }">
          <section class="flex items-center gap-x-1">
            <span>{{ data.label }}</span>
            <span class="text-[#86909C]">({{
              getOptionsLabel(addressPoolData, data.value, 'address_count')
            }}
              个地址)</span>
          </section>
        </template>
        <a-option
          v-for="item in addressPoolData"
          :key="item.id"
          class="h-[28px]"
          :disabled="rulesIds.includes(item.id)"
          :label="item.name"
          :value="item.id"
        >
          <section class="flex items-center gap-x-1">
            <span>{{ item.name }}</span>
            <span>({{ item.address_count }} 个地址)</span>
          </section>
        </a-option>
        <template
          v-if="addressPoolType === 1"
          #footer
        >
          <div
            class="h-8 flex cursor-pointer items-center gap-x-1 px-3 text-[#00A65B] leading-8"
            @click="handleJump"
          >
            <span class="text-xs leading-[19px]">新建地址池</span>
            <i-icons-jump
              size="14px"
              class="!text-[#00A65B]"
            />
          </div>
        </template>
      </a-select>
      <i-icons-refresh
        v-if="addressPoolType === 1"
        class="ml-4 cursor-pointer"
        :class="{ 'animate-spin': loading }"
        @click="run"
      />
    </a-form-item>
    <div class="action h-8 w-4 flex items-center justify-center">
      <a-link
        :disabled="disableDelete"
        status="danger"
        :hoverable="false"
        class="flex items-center"
        long
        @click="emit('delete')"
      >
        <i-icons-delete />
      </a-link>
    </div>
  </a-form>
</template>

<style scoped lang="less"></style>
